<template>
<div id="user-edit">
        <div class="baseInfo" v-if="getuser != null">
            <div class="baseInfo-top" v-if="false">
                <h3>基本资料</h3>
            </div>
            <div class="baseInfo-desc">
                <ul>
                    <li>
                        <span>昵称</span>
                        <div class="write">
                            <div>{{ getuser.nickname }}</div>
                        </div>
                    </li>
                    <li>
                        <span>学号</span>
                        <div class="write">
                            <div>{{ getuser.id }}</div><!-- 学号的获取 -->
                        </div>
                    </li>
                    <li>
                        <span>性别</span>
                        <div class="write">
                            <div>{{ getuser.sex }}</div>
                        </div>
                    </li>
                    <li>
                        <span>年龄</span>
                        <div class="write">
                            <!-- <div v-if="getuser.age > 0">{{ getuser.age }}</div> -->
                            <input type="number"  v-model="user.age" placeholder="请输入数字">
                            <!--<span class='unit'>岁</span>-->
                        </div>
                    </li>
                    <!--新加出生日期-->
                    <!--<li>
                        <span>出生年月</span>
                        <div class="write">
                            <input type="number"  v-model="user.age" placeholder="请输入数字"><span class="userYear">年</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="number"  v-model="user.age" placeholder="请输入数字"><span class="userMonth">月</span>
                        </div>
                    </li>-->
                    <li>
                        <span>身高</span>
                        <div class="write">
                            <!-- <div v-if="getuser.height > 0">{{ getuser.height }}cm</div> -->
                            <input type="number" class='input'  v-model="user.height" placeholder="请输入数字">
                            <span class='unit'>&nbsp;cm</span>
                        </div>
                    </li>
                    <li>
                        <span>最初体重</span>
                        <div class="write">
                            <!--<div v-if="getuser.weight > 0">{{ getuser.weight }}kg</div>-->
                            <input  v-model="user.weight" placeholder="请输入数字">
                            <span class='unit'>&nbsp;kg</span>
                        </div>
                    </li>
                    <!--新加锻炼后的体重-->
                    <!--<li>
                        <span>运动体重</span>
                        <div class="write">
                            <div v-if="getuser.weight > 0">{{ getuser.weight }}kg</div>
                            <input  v-model="user.weight" placeholder="请输入数字">
                            <span class='unit'>kg</span>
                        </div>
                    </li>-->
                    <!--<li>
                        <span>部位</span>
                        <div class="write">
                            <div v-if="getuser.palce != null">{{ getuser.palce }}</div>

                            <div v-else>
                                <div class="placeholder">
                                    <select v-model="user.type" style="font-size:16px;color:#f9b811" >
                                        <option value="default">请选择</option>
                                        <option value="1">不限</option>
                                        <option value="2">背部</option>
                                        <option value="3">胸部</option>
                                        <option value="4">臀部</option>
                                    </select>
                                </div>
                                <i class="more" :style= "'background-image: url('+$qiniu.url+'assets/img/dayu.png)'"></i>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>类型</span>
                        <div class="write">
                            <div v-if="getuser.type !=null">{{ getuser.type  }}</div>
                            <div v-else>
                                <div class="placeholder">
                                    <select name="" id="" style="font-size:16px;color:#f9b811" v-model="user.type">
                                        <option value="default">请选择</option>
                                        <option value="1">不限</option>
                                        <option value="2">减脂</option>
                                        <option value="3">塑型</option>
                                        <option value="4">增肌</option>
                                    </select>
                                </div>
                                <i class="more" :style= "'background-image: url('+$qiniu.url+'assets/img/dayu.png)'"></i>
                            </div>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
        <!--<div class="lianxiInfo" v-if="false">
            <div class="lianxiInfo-top">
                <h3>联系信息</h3>
            </div>
            <div class="lianxiInfo-desc" >
                <ul>
                    <li>
                        <span>手机</span>
                        <div class="write">
                            <div v-if="getuser.phone!=null">{{ getuser.phone }}</div>
                            <input type="text" v-else v-model="user.phone" placeholder="15645456767">
                        </div>
                    </li>
                    <li>
                        <span>邮箱</span>
                        <div class="write">
                            <div v-if="getuser.email!=null">{{ getuser.email }}</div>
                            <input type="text" v-else v-model="user.email" placeholder="smile@163.com">
                        </div>
                    </li>
                    <li>
                        <span>地址</span>
                        <div class="write">
                            <div v-if="getuser.address!=null">{{ getuser.address }}</div>
                            <input type="text" v-else v-model="user.address" placeholder="上海浦东">
                        </div>
                    </li>
                </ul>
            </div>
        </div>-->
        <div class="btnwrapper">
                 <div  class="btn" @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</div>
            </div>
        <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import {
        showFooter,
        hideFooter,
        errFun,
        refreshTitle
    } from "../../tools.js";
    import Loading from '../loading';
    import api from "../../api";
    export default {
        computed: {
            //获取vuex的值的
            getuser() {
                return this.$store.state.edit
            },
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            // showBtn() {
            //     if (this.getuser.nickname == null || this.getuser.nickname == 0 || this.getuser.age == null || this.getuser.age == 0 || this.getuser.sex == null || this.getuser.sex == 0 || this.getuser.height == null || this.getuser.height == 0 || this.getuser.weight == null || this.getuser.weight == 0 || this.getuser.type == null || this.getuser.type == 0 || this.getuser.palce == 0 || this.getuser.palce == null) {
            //         return true;
            //     } else {
            //         return false;
            //     }
            // },


        },
        data() {
            return {
                user: {
                    sex: null,
                    age: null,
                    height: null,
                    weight: null,
                    type: "default",
                    palce: "default",
                }
            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            this.$store.dispatch('GET_EDIT_USER_INFO');
        },
        methods: {
            //获取用户的信息
            getUser() {
                //发送api
                var that = this;
                api.getEdit().then(function(result) {
                    if (result.status == 200) {
                        that.user.weight = result.data.weight;
                        that.user.age = result.data.age;
                        that.user.height = result.data.height;
                    }
                })
            },
            submit() {
                var reg1 = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱的正则表达
                var reg2 = /^1[34578]\d{9}$/; //手机号的正则表达
                //判断是否符合格式
                if (this.user.email != null || this.user.phone != null) {
                    if (reg1.test(this.user.email) || reg2.test(this.user.phone)) {
                        this.sendInfo();
                    } else {
                        alert("手机或者邮箱的格式不正确，请重新输入！！！")
                    }
                } else {
                    //直接发送请求
                    this.sendInfo();
                }
            },
            //发送请求
            sendInfo() {
                var that = this;
                if (this.user.types == 'default') {
                    this.user.types = null
                }
                if (this.user.parts == 'default') {
                    this.user.parts = null
                }
                api.setEditInfo(that.user).then(function(result) {
                    // that.$store.dispatch('HIDDEN_LOADING_SHOW');
                    //隐藏按钮
                    that.$store.dispatch('GET_EDIT_USER_INFO');
                })
            },
        },
        mounted() {
            this.$nextTick(function() {
                // 代码保证 this.$el 在 document 中
                //实现底部的动画效果及取消padding值
                var app = document.getElementById('app');
                app.style.paddingBottom = "0px";
                var footer = document.getElementById('footer');
                hideFooter(footer);
                //或取btn按钮，判断显示与隐藏
                var btn = document.querySelector(".btn");
                var btnwrapper = document.querySelector(".btnwrapper");

                this.getUser();
            });
        },
        components: {
            Loading,
        },
        beforeDestroy() {
            var app = document.getElementById('app');
            app.style.paddingBottom = "50px";
            var footer = document.getElementById('footer');
            showFooter(footer);
        },
    }
</script>
<style>
    #user-edit {
        .baseInfo,
        .lianxiInfo {
            width: 100%;
        }
        .baseInfo .baseInfo-top,
        .lianxiInfo .lianxiInfo-top {
            width: 100%;
            height: 55px;
        }
        .baseInfo .baseInfo-top h3,
        .lianxiInfo .lianxiInfo-top h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 55px;
            color: #156d5e;
            text-indent: 14px;
        }
        .baseInfo .baseInfo-desc,
        .lianxiInfo .lianxiInfo-desc {
            width: 100%;
        }
        .baseInfo .baseInfo-desc ul,
        .lianxiInfo .lianxiInfo-desc ul {
            width: 100%;
        }
        .baseInfo .baseInfo-desc ul li,
        .lianxiInfo .lianxiInfo-desc ul li {
            display: block;
            width: 100%;
            height: 57px;
            /*background: #1a1d2c;*/
            border-bottom: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
        }
        .baseInfo .baseInfo-desc ul li span,
        .lianxiInfo .lianxiInfo-desc ul li span {
            font-size: 16px;
            line-height: 57px;
            display: block;
            width: 88px;
            height: 57px;
            color: #f1f1f1;
            text-align: center;
            float: left;
        }
        .baseInfo .baseInfo-desc ul li .write,
        .lianxiInfo .lianxiInfo-desc ul li .write {
            margin-left: 60px;
            font-size: 16px;
            line-height: 57px;
            height: 100%;
            color: #575f76;
            padding-left: 10px;
            position: relative;
        }
        .baseInfo .baseInfo-desc ul li .write input,
        .lianxiInfo .lianxiInfo-desc ul li .write input {
            outline: none;
            background: #161616;
            color: #f9b811;
            font-size: 16px;
            border: 1px solid #575f76;
            width: 80px;
            height: 30px;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            /*margin-bottom: 15px;*/
        }
        .baseInfo .baseInfo-desc ul li .write .unit {
            position: absolute;
            left: 80px;
            top: 0px;
            color: #f9b811;
        }
        .baseInfo .baseInfo-desc ul li .write .userYear{
        		position: absolute;
            left: 80px;
            top: 0px;
            color: #f9b811;
        }
        .baseInfo .baseInfo-desc ul li .write .userMonth{
        		position: absolute;
            left: 195px;
            top: 0px;
            color: #f9b811;
        }
        /*input: -webkit-autofill {
            
        }*/
        /*.baseInfo .baseInfo-desc ul li .write input .weiValue {
            color: #f9b811!important;
        }*/
         ::-webkit-input-placeholder {
            color: #f9b811;
            font-size: 12px;
        }
        .baseInfo .baseInfo-desc ul li .write .placeholder {
            color: #f9b811;
            font-size: 16px;
        }
        .baseInfo .baseInfo-desc ul li .write .placeholder select {
            width: 90%;
            appearance: none;
            background: none;
            border: none;
            background-size: 20px 20px;
        }
        .baseInfo .baseInfo-desc ul li .write div {
            position: relative;
            height: 57px;
        }
        .baseInfo .baseInfo-desc ul li .write div select {
            width: 100%;
            height: 60px;
            outline: none;
            color: #575f76;
        }
        .baseInfo .baseInfo-desc ul li .write div .more {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            background-position: -15px -2px;
            background-repeat: no-repeat;
            background-size: 30px 50px;
        }
        /*.baseInfo .baseInfo-desc ul li .write select,
.lianxiInfo .lianxiInfo-desc ul li .write select {
    outline: none;
    color: #575f76;
}*/
        .btnwrapper {
            position: relative;
            width: 100%;
            height: 60px;
            margin-top: 15%;
        }
        .btn {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            /*background: #1a1d2c;*/
            border: 1px solid #00BA9B;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
            color: #00BA9B;
            position: absolute;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            margin: 10px 0 10px 0;
        }
    }
</style>